<template>
<div class="com-center-map fc">
  <div class="f1" ref="chart"></div>
</div>
</template>

<script>
import echarts from 'echarts'
import moment from 'moment'
import china from 'echarts/map/json/china'

export default {
  name: 'com-center-map',
  props: ['chartData'],
  data () {
    return {
      chart: null
    }
  },
  methods: {
    async setOption () {
      const d1 = [
        { name: '江苏', value: 10041 },
        { name: '黑龙江', value: 4093 },
        { name: '内蒙古', value: 1157 },
        { name: '吉林', value: 4903 },
        { name: '北京市', value: 2667 },
        { name: '辽宁', value: 8331 },
        { name: '河北', value: 23727 },
        { name: '天津', value: 681 },
        { name: '山西', value: 5352 },
        { name: '陕西', value: 38 },
        { name: '甘肃', value: 77 },
        { name: '宁夏', value: 65 },
        { name: '青海', value: 10 },
        { name: '新疆', value: 193 },
        { name: '四川', value: 309 },
        { name: '重庆', value: 77 },
        { name: '山东', value: 21666 },
        { name: '河南', value: 15717 },
        { name: '安徽', value: 15671 },
        { name: '湖北', value: 3714 },
        { name: '浙江', value: 3141 },
        { name: '福建', value: 955 },
        { name: '江西', value: 4978 },
        { name: '湖南', value: 778 },
        { name: '贵州', value: 33 },
        { name: '云南', value: 149 },
        { name: '广东', value: 1124 },
        { name: '广西', value: 125 },
        { name: '海南', value: 7 },
        { name: '上海', value: 2155 }
      ]
      // const map = await getMap('100000', '全国')
      echarts.registerMap('china', china)
      this.chart.setOption({
        tooltip: {
          show: true,
          trigger: 'item',
          padding: 20,
          textStyle: {
            fontSize: 28
          },
          formatter: '{b}: {c}'
          // formatter (params) {
          //   const item = d1.find(v => v.name.indexOf(params.name) !== -1)
          //   return `<div class="map-tooltip">
          //             <h3>${params.name} ${moment().format('YYYY-MM-DD')}</h3>
          //             ${item.data.map(v => `<div class="fr ac"><i class="dot"></i>${v.branchName}：<div class="f1"></div>${v.count}</div>`).join('')}
          //           </div>`
          // }
        },
        geo: {
          map: 'china', // 展示城市地图 可动态设置
          label: {
            // 区域名称显示
            show: true,
            textStyle: {
              color: "#FFF",
              fontWeight: 600,
              fontSize: 20
            }
          },
          zoom: 1.2, // 放大比例
          itemStyle: {
            // 区域间样式调节
            borderColor: "lightblue",
            areaColor: "rgb(10, 22, 63)"
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          }
        },
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: d1
          }
        ]
      })

    }
  },
  mounted () {
    this.chart = echarts.init(this.$refs.chart)
    this.setOption()
  },
  watch: {
    chartData () {
      this.setOption()
    }
  }
}
</script>

<style lang="less">
.com-center-map {grid-column-start: span 2;grid-row-start: span 3;
  border: 4px solid #0CFFFE;background: linear-gradient(180deg, rgba(27, 79, 86, 0.24) 0%, #072228 100%);box-shadow: inset 1px 20px 60px 0px rgba(30, 145, 161, 0.5);

}
</style>
